{% extends 'frontend/base.html' %}
{% load static %}
{% block PageSearch %}
    <div class="col-lg-10 offset-lg-1">
        <form class="sow-search d-block" action="{% url 'front-toolkit:toolkit' %}">
            <div class="sow-search-input w-100">
                <!-- rounded: form-control-pill -->
                <div class="input-group-over d-flex align-items-center w-100 h-100 rounded">
                    <input placeholder="" required name="name"
                           type="text"
                           class="form-control-sow-search form-control form-control-custom border-0 text-white bg-diff"
                           value="" autocomplete="off">

                    <span class="sow-search-buttons">
                                <!-- search button -->
                                <button aria-label="Global Search" type="submit"
                                        class="btn shadow-none m-0 px-3 py-2 bg-transparent text-white">
                                    <i class="fi fi-search fs-5 m-0"></i>
                                </button>
							</span>
                </div>

            </div>

            <!-- search suggestion container -->
            <div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
                <div class="sow-search-container-wrapper">

                    <!-- main search container -->
                    <div class="sow-search-loader p-3 text-center hide">
                        <i class="fi fi-circle-spin fi-spin text-muted fs-1"></i>
                    </div>

                    <!--
                        AJAX CONTENT CONTAINER
                        SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
                    -->
                    <div class="sow-search-content rounded w-100 scrollable-vertical"></div>

                </div>
            </div>
            <!-- /search suggestion container -->
            <div class="sow-search-backdrop backdrop-dark hide">
                <!-- alternate: overlay-dark opacity-3 --></div>

        </form>
        <!-- /SEARCH -->
    </div>
{% endblock %}
{% block Content %}
    <!-- PAGE TITLE -->
    <div class="section pb-4 pt-5">
        <div class="container">
            <div class="col-12 col-lg-10 offset-lg-1">
                <h1 class="h2 fw-bold">工具箱</h1>
            </div>
        </div>
    </div>
    <!-- /PAGE TITLE -->

    <!-- start :: help center -->
    <div class="section py-4 mb-5">
        <div class="container">
            <div class="bg-white rounded shadow-xs p-4 px-lg-5 col-lg-10 offset-lg-1">
                <div class="row mb-7">
                    <h2 class="h4 mb-2">
                        {{ toolkits.count }} 个工具
                    </h2>
                    {% for toolkit in toolkits %}
                        <a href="{{ toolkit.url }}"
                           class="col-12 col-md-6 text-decoration-none text-dark shadow-xs-hover transition-hover-top transition-all-ease-250 py-4 rounded d-flex">

                            <div class="ratio ratio-16x9 bg-light me-3" style="max-width: 100px;">
                                <div class="bg-cover rounded"
                                     style="background-image:url(https://picsum.photos/seed/{{ toolkit.id }}/300/500);"></div>
                            </div>
                            <div>
                                <h3 class="text-primary fs-5">{{ toolkit.name }}</h3>
                                <p>
                                    {{ toolkit.describe }}
                                </p>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <!-- end :: help center -->
{% endblock %}